import React, { useState } from 'react';
import { ArrowLeft, ArrowRight, RefreshCw, Home } from 'lucide-react';

interface AddressBarProps {
  url: string;
  onNavigate: (url: string) => void;
  onRefresh: () => void;
  onHome: () => void;
  canGoBack?: boolean;
  canGoForward?: boolean;
  onGoBack?: () => void;
  onGoForward?: () => void;
}

export function AddressBar({
  url,
  onNavigate,
  onRefresh,
  onHome,
  canGoBack = false,
  canGoForward = false,
  onGoBack,
  onGoForward
}: AddressBarProps) {
  const [inputUrl, setInputUrl] = useState(url);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    let finalUrl = inputUrl;
    if (!finalUrl.startsWith('http')) {
      finalUrl = 'https://' + finalUrl;
    }
    onNavigate(finalUrl);
  };

  return (
    <div className="flex items-center bg-white border-b border-gray-200 px-4 py-2">
      <div className="flex items-center space-x-1">
        <button
          onClick={onGoBack}
          disabled={!canGoBack}
          className="p-2 text-gray-600 hover:bg-gray-100 rounded disabled:opacity-50 disabled:cursor-not-allowed"
          title="后退"
        >
          <ArrowLeft size={16} />
        </button>
        
        <button
          onClick={onGoForward}
          disabled={!canGoForward}
          className="p-2 text-gray-600 hover:bg-gray-100 rounded disabled:opacity-50 disabled:cursor-not-allowed"
          title="前进"
        >
          <ArrowRight size={16} />
        </button>
        
        <button
          onClick={onRefresh}
          className="p-2 text-gray-600 hover:bg-gray-100 rounded"
          title="刷新"
        >
          <RefreshCw size={16} />
        </button>
        
        <button
          onClick={onHome}
          className="p-2 text-gray-600 hover:bg-gray-100 rounded"
          title="主页"
        >
          <Home size={16} />
        </button>
      </div>

      <form onSubmit={handleSubmit} className="flex-1 ml-2">
        <input
          type="text"
          value={inputUrl}
          onChange={(e) => setInputUrl(e.target.value)}
          className="w-full px-3 py-1 border border-gray-300 rounded text-sm"
          placeholder="输入网址或搜索"
        />
      </form>
    </div>
  );
}